<script lang="ts" setup>
import { computed } from 'vue';

const { width, height } = defineProps<{ src?: string, width?: number | string, height?: number | string }>()

const styles = computed(() => ({
    width: `${width}px`,
    height: `${height}px`,
}))
</script>

<template>
    <div class="umrp-image" :style="styles">
        <img :src="src" v-if="src">
        <iconpark-icon v-else name="picture"></iconpark-icon>
    </div>
</template>

<style lang="scss" scoped>
.umrp-image {
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ccc;

    >img {
        height: 100%;
        width: 100%;
    }
}
</style>